<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
		<title>客户详细展示信息</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/axios.js"></script>
		<script type="text/javascript" src="../js/qs.js"></script>
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/iview/dist/iview.min.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="//unpkg.com/element-ui@2.4.11/lib/index.js"></script>
		<style scoped>
			/* 在此定义当前页面css */
			@import url("//unpkg.com/element-ui@2.4.11/lib/theme-chalk/index.css");
			@import url("//unpkg.com/iview/dist/styles/iview.css");
			.time{
				font-size: 15px;
				font-weight: bold;
			}
			.content{
				padding-left: 5px;
			}
		</style>
		<style type="text/css">
			.el-header{
				border: 1px solid #C0C0C0;
				color: #000000;
				text-align: center;
				height: 400px;
			  }
			  #linegray{
				  border: 1px solid #C0C0C0;
				  width: 25%;
			  }
			  #boxdiv{
				  width:70%;
				  border: 1px solid #C0C0C0;
				  float: right;
			  } 
			  p{
				  font-size: 15px;
			  }
			  .el-aside{
			  	margin-left:20px;
			  	margin-top:10px;
			  }
			  .el-main{
			  	/* background:#F4F9F8; */
			  	margin-top:10px;
			  	margin-left:10px;
			  	border:1px solid #C0C0C0;
			  }
			  #app{
			  	/* background-color: #E0EEEE;  */
			  	height:100%;
			  	box-shadow:0px 0px 10px #E0EEEE inset;
			  }
			  table.hovertable {
	    font-family: verdana,arial,sans-serif;
	    font-size:11px;
	    color:#333333;
	    border-width: 1px;
	    border-color: #999999;
	    border-collapse: collapse;
	    width:100%;
	}
	table.hovertable th {
	    /* background-color:#c3dde0; */
	    border-width: 1px;
	    padding: 8px;
	    border-style: solid;
	    border-color: #a9c6c9;
	}
	table.hovertable tr {
	   /*  background-color:#d4e3e5; */
	}
	table.hovertable td {
	    border-width: 1px;
	    padding: 8px;
	    border-style: solid;
	    border-color: #a9c6c9;
	}
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
			  <el-header>
				  <div style="text-align: center;">
					<p style="font-size: 15px;">{{cust.name}}</p>
					<span style="font-size: 15px;">更新：{{cust.signing2}}，创建：{{cust.signing}} <span style="border: 1px #000000 solid;width:70px;">{{cust.stages}}</span></span>
				  </div>
			 </el-header>
			  <el-container>
				<el-aside>
				<!--  style="border: 1px #C0C0C0 solid;" -->
					<div>
						<p class="el-icon-success">应付/预付</p>
						<!-- prop="returnmoney" 
							 prop="intelligent"
							 prop="prepaid" 
							 prop="selectReturnIi"
							 prop="selectReturnPlan"
							 prop="selectAdvance"--> 						
						<table class="hovertable">
						<tr>
						    <th>智能回款</th>
						    <th>计划回款</th>
						    <th>预付余额</th>
						</tr>
						<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
						    <td>{{xx}}</td>
						    <td>{{yy}}</td>
						    <td>{{zz}}</td>
						</tr>
						</table>
					</div>
					<br />
					<div>
						<p class="el-icon-tickets">签约数据</p>
						<!-- prop="contract"  
							 prop="deliver" 
							 prop="moneyback"  -->
						<table class="hovertable">
						<tr>
						    <th>订单</th>
						    <th>发货</th>
						    <th>退货</th>
						    <th>回款</th>
						</tr>
						<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
						    <td>{{aa}}</td>
						    <td>{{bb}}</td>
						    <td>{{cc}}</td>
						    <td>{{dd}}</td>
						</tr>
						</table>
					</div>
					<br />
					<div style="border: 1px #C0C0C0 solid;">
						<p class="el-icon-info">基本信息</p>
						<p>简称：{{cust.shortname}}</p>
						<p>种类：{{cust.sour}}</p>
						<p>来源：{{cust.types}}</p>
						<p>首次签约：{{cust.signing2}}</p>
					</div>
					<br />
					<div style="border: 1px #C0C0C0 solid;">
						<p class="el-icon-menu">联系电话</p>
						<p>姓名：{{cust.name}}</p>
						<p>手机：{{cust.phone}}</p>
						<p>邮箱：{{cust.email}}</p>
					</div>
					<br />
					<div style="border: 1px #C0C0C0 solid;">
						<p>$销售费用<span style="float: right;">￥0.00</span></p>
						
					</div>
				</el-aside>
				<el-main>
					<div>
						<p class="el-icon-time">跟单时间线</p>
					</div>
					<div class="line"></div>
					<br />
					<timeline>
						<timeline-item v-for="item in tl" :key="item.value" :label="item.label" :value="item.value">
							<p class="time">{{item.times}}</p>
							<p class="content" style="font-weight: bold;">{{item.theme}}</p>
							<p class="content">{{item.details}}</p>
						</timeline-item>
					</timeline>
				</el-main>
			  </el-container>
			</el-container>
		</div>
		<script type="text/javascript">
		//var customerInfo=${customer};
		//var contactInfo=${contact};
		var Main = {
			data() {
			        return {
						tableData: [],
						tableData2: [],
						activeIndex: '1',
						activeIndex2: '1',
						value:'',
						item:'',
						tl:[],//时间线获取的数据
						cust:[],//时间线id获取的客户数据
						xx:'',//智能回款
						yy:'',//计划回款
						zz:'',//预付余额
						aa:'',//订单总额
						bb:'',//发货总额
						cc:'',//退货总额
						dd:'',//实际回款
						}
					},
				methods: {
				  handleSelect(key, keyPath) {
					console.log(key, keyPath);
				  },
				},mounted(row){
					var _this=this;
					var url= window.location.href;
					var url1= url.indexOf("?");
					if(url1!=-1){
						//this.complaintheme=decodeURI(url.substring(url1+1,url.length).split('&')[0].split('=')[1]);
						//截取每一个条件
						var urlcondition= url.substring(url1+1,url.length).split('&');
						for(var i=0;i<urlcondition.length;i++){
							if(urlcondition[i].split('=')[0]=="custid"){
								console.log("这个是客户id："+decodeURI(urlcondition[i].split('=')[1]));
								axios.post('/customer/addtimeline',
										Qs.stringify({'custid':decodeURI(urlcondition[i].split('=')[1])},
												{arrayFormat: 'brackets'})
					           			//ajax请求成功的回调函数
					          			).then(function(response){					          				
					           			console.log("回调成功，获取了服务器端返回的值v");
					           			console.log("时间线信息："+JSON.stringify(response.data.tl));
					           			_this.tl=response.data.tl;
					           			console.log("时间线信息***："+_this.tl.times);
					           			console.log("客户信息："+JSON.stringify(response.data.customer));
					           			_this.cust=response.data.customer;
					           			console.log("智能回款信息："+JSON.stringify(response.data.intelligent));
					           			_this.xx=response.data.intelligent;
					           			console.log("计划回款信息："+JSON.stringify(response.data.returnmoney));
					           			_this.yy=response.data.returnmoney;
					           			console.log("预付余额信息："+JSON.stringify(response.data.prepaid));
					           			_this.zz=response.data.prepaid;
					           			console.log("订单总额信息："+JSON.stringify(response.data.contract));
					           			_this.aa=response.data.contract;
					           			console.log("发货总额信息："+JSON.stringify(response.data.deliver));
					           			_this.bb=response.data.deliver;
					           			console.log("退货总额信息："+JSON.stringify(response.data.moneyback));
					           			_this.cc=response.data.moneyback;
					           			console.log("实际回款信息："+JSON.stringify(response.data.signing));
					           			_this.dd=response.data.signing;
					           		_this.restaurants=response.data;
					           	}).catch(function(){
					           		alert("显示客户初始化数据出错了");
					           	});
							}
						}
					}
				}
			}
			var Ctor = Vue.extend(Main);
			new Ctor().$mount('#app');
		</script>
	</body>
</html>
